<template>
    <el-tabs v-model="activeName" type="card">
        <el-tab-pane v-for="item in data" :key="item.name" :lazy="true" :label="item.name" :name="item.name">
            <span>服务器路径：{{ item.filePath }}</span>
            <el-button type="primary" align="right" @click="savefile(item)">保存</el-button>

            <Editor :ref="item.id" v-model="item.content" :height="height" :lang="item.language" />
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import Editor from '@/components/Editor/index'
import { generator, savepreviewfile } from '@/api/generator/generator'
export default {
  name: 'Preview',
  components: { Editor },
  data() {
    return {
      data: null,
      height: '',
      activeName: 'index'
    }
  },
  created() {
    this.height = document.documentElement.clientHeight - 180 + 'px'
    const tableName = this.$route.params.tableName
    generator(tableName, 1)
      .then(data => {
        this.data = data
      })
      .catch(() => {
        this.$router.go(-1)
      })
  },
  methods: {
    savefile(data) {
      //   data.content = this.$refs[data.id][0].getEditorValue()
      savepreviewfile(data)
        .then(data => {
          this.$notify.success({
            title: '已保存',
            message: data.filePath
          })
        })
        .catch(e => {
          this.$notify.error({
            title: '保存文件',
            message: e
          })
        })
    }
  }
}
</script>
